<template lang="pug">
div
  //- Button(@click='add') add
  div(style='margin-bottom: 20px')
    //- router-link(to='media/add') 添加新合集
    Button(type='success', icon='plus', @click='$router.push("media/add")') 新增合集
  //- Table(:columns='cols', :data='mediaItems')
  Row(:gutter=16)
    Col(:span=8, v-for='(media, idx) in mediaItems', key='media.id')
      div.article
        h2.article-title {{ media.title }}
        template(v-if='media.image')
          img.article-cover.img-responsive(:src='media.image.small')
        template(v-else)
          div.article-empty-cover 请上传封面
        div.article-actions
          router-link(:to='{ name: "edit-media", params: { id: media.id } }')
            Icon(type='edit')
            span &nbsp; 编辑
          router-link(:to='{ name: "media-unit-list", params: { id: media.id } }')
            Icon(type='edit')
            span &nbsp; 单元管理
          a(href='javascript:;', @click='remove(idx)')
            Icon(type='trash-b', size='14')
            span &nbsp; 删除
  div.text-center
    Page(:current='page + 1' :total='total', :page-size='pageSize', size='small', show-total, @on-change='viewPage')

</template>

<script>
import { mapState } from 'vuex'
import Api from '@/apis/media'
import store from '@/store'

const pageSize = 9

export default {
  beforeRouteEnter (to, from, next) {
    let page = to.query.page || 1
    page = Math.max(page - 1, 0)
    Api.getMediaList({ gid: store.state.app.id, page, limit: pageSize }).then(data => {
      next(vm => {
        vm.page = page
        vm.total = data.total
        vm.mediaItems = data.list
      })
    })
  },
  beforeRouteUpdate (to, from, next) {
    let page = to.query.page || 1
    page = Math.max(page - 1, 0)
    Api.getMediaList({ gid: store.state.app.id, page: page, limit: pageSize }).then(data => {
      this.page = page
      this.total = data.total
      this.mediaItems = data.list
      next()
    })
  },
  data () {
    return {
      page: 0,
      total: 0,
      pageSize,
      mediaItems: []
    }
  },
  computed: {
    ...mapState({
      appId: state => state.app.id
    })
  },
  methods: {
    viewPage (page) {
      this.$router.push({
        path: '',
        query: { page }
      })
    },
    remove (idx) {
      this.$Modal.confirm({
        title: '删除确认',
        content: `删除 < ${this.mediaItems[idx].title} > 吗？`,
        loading: true,
        onOk: () => {
          const id = this.mediaItems[idx].id
          Api.deleteMedia(id).then(() => {
            this.$Message.success('删除成功')
            this.mediaItems.splice(idx, 1)
            this.$Modal.remove()
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.article {
  // margin: 0 8px;
  position: relative;
  border: 1px solid #eee;
  overflow: hidden;
  margin-bottom: 16px;

  &-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 3px 8px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    font-size: 14px;
  }

  &-cover, &-empty-cover {
    width: 275px;
    height: 183px;
    background-color: #eee;
  }

  &-empty-cover {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    // height: 66%;
  }

  &-actions {
    // padding: 8px;
    text-align: center;
    display: flex;

    a {
      display: inline-block;
      padding: 8px;
      // width: 50%;
      flex: 1;
      color: #777;

      &:hover {
        color: #333;
      }

      & + a {
        border-left: 1px solid #eee;
      }
    }

    // border: 1px solid #ccc;
    // border-top: none;
  }
}
</style>
